---
title: Create a spreadsheet
---

import siteConfig from '/docusaurus.config.js';

It's just like excel, but without all the useful parts.

<SandpackEditor>

```ts
import canvasDatagrid from 'canvas-datagrid';
import createData from '/create-data';

const app = document.getElementById('app');
const gridElement = document.createElement('div');
const grid = canvasDatagrid({
  parentNode: gridElement,
  data: createData();
});

app.append(gridElement);

grid.attributes.columnHeaderClickBehavior = 'select';
grid.style.columnHeaderCellHorizontalAlignment = 'center';
grid.style.height = '300px';
grid.style.width = '100%';
```

```ts create-data.ts
export default function () {
  const data = [];
  function colName(n) {
    const ordA = 'a'.charCodeAt(0);
    const ordZ = 'z'.charCodeAt(0);
    const len = ordZ - ordA + 1;
    let s = '';

    while (n >= 0) {
      s = String.fromCharCode((n % len) + ordA) + s;
      n = Math.floor(n / len) - 1;
    }

    return s;
  }

  for (const x = 0; x < 100; x += 1) {
    const row = {};

    for (const y = 0; y < 50; y += 1) {
      const n = colName(y).toUpperCase();
      row[n] = x * y;
    }

    data.push(row);
  }

  return data;
}
```

</SandpackEditor>
